<template>
  <div class="timepick">
    <span class="demonstration">{{name}}</span>
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      value-format="yyyy-MM-dd HH:mm:ss"
      size="mini"
      :disabled="!editable"
      :readonly="!editable"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="dataChange"
    >
    </el-date-picker>
  </div>
</template>

<script>
    export default {
        name: "datePick",
      data(){
          return{
            value1:[],
          }
      },
      methods:{
        dataChange(data){
          this.$emit('dateChangeHandle', data)
        },
          setValue1(){
            if(this.date1&&this.date2){
              this.value1.push(this.date1)
              this.value1.push(this.date2)
            }

          }
      },
      props:[
        'date1',
        'date2',
        'editable',
        'name'
      ],
    mounted(){
      this.setValue1();
    }
    }
</script>

<style scoped>
  .timepick >>> .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width:250px;
  }
</style>
